<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>后台管理</title>
  <link rel="stylesheet" href="inc/layui/css/layui.css" media="all">
  <!--[if lt IE 9]>
    <script src="inc/jquery/html5.min.js"></script>
    <link rel="stylesheet" href="css/admin.css" media="all">
    <script src="inc/jquery/respond.min.js"></script>
    <![endif]-->
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    body {
      /*background: #009688;*/
      background-image: url("img/bg.jpg");
      background-size: 100% 100%;
    }

    body:after {
      content: '';
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-filter: blur(3px);
      -moz-filter: blur(3px);
      -o-filter: blur(3px);
      -ms-filter: blur(3px);
      filter: blur(3px);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }

    .layui-container {
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    .admin-login-background {
      width: 360px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 40%;
      margin-left: -180px;
      margin-top: -100px;
    }

    .logo-title {
      text-align: center;
      letter-spacing: 2px;
      padding: 14px 0;
    }

    .logo-title h1 {
      color: #009688;
      font-size: 25px;
      font-weight: bold;
    }

    .login-form {
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      padding: 14px 20px;
      box-shadow: 0 0 8px #eeeeee;
    }

    .login-form .layui-form-item {
      position: relative;
    }

    .login-form .layui-form-item label {
      position: absolute;
      left: 1px;
      top: 1px;
      width: 38px;
      line-height: 36px;
      text-align: center;
      color: #d2d2d2;
    }

    .login-form .layui-form-item input {
      padding-left: 36px;
    }

    .captcha {
      width: 60%;
      display: inline-block;
    }

    .captcha-img {
      display: inline-block;
      width: 34%;
      float: right;
    }

    .captcha-img img {
      height: 34px;
      border: 1px solid #e6e6e6;
      height: 36px;
      width: 100%;
    }

    .password {}

    .password div {
      position: absolute;
      right: 1px;
      top: 1px;
      width: 28px;
      height: 23px;
      text-align: center;
      align-self: center;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 2px;
    }
  </style>
  <script src="inc/g.js"></script>
</head>

<body>
  <div class="layui-container">
    <div class="admin-login-background">
      <div class="layui-form login-form">

        <div class="layui-form-item logo-title">
          <h1 id="title"></h1>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-username"></label>
          <input value="admin" type="text" name="name" required lay-verify="required" placeholder="请输入手机号"
            autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item password">
          <label class="layui-icon layui-icon-password"></label>
          <input value="123456" type="password" name="password" required lay-verify="required" placeholder="请输入密码"
            autocomplete="off" class="layui-input ">
          <div>
            <img src="img/icon/undisply.png" style="text-align: center;width: 17px;height: 10px" id="displyPwd"
              onclick="displyPwd()" />
          </div>

        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-vercode"></label>
          <input type="text" name="captcha" lay-verify="required|captcha" placeholder="验证码" autocomplete="off"
            class="layui-input verification captcha" value="">

          <div class="captcha-img">
            <!--  <div id="zylVerCode" onclick="zylVerCode()" style="align:left;font-size: 34px;color: #434257" ></div>-->
            <canvas id="canvas" width="100" height="39" onclick="draw([])"></canvas>
          </div>
        </div>
        <!--<div class="layui-form-item">
                <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
            </div>-->
        <div class="layui-form-item">
          <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
        </div>
      </div>
    </div>
  </div>
  <script src="inc/g.js" charset="utf-8"></script>
  <script src="inc/jquery/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="inc/jquery/jparticle.min.js" charset="utf-8"></script>
  <script src="inc/layui/layui.js" charset="utf-8"></script>
  <script src="inc/jquery/jquery.particleground.min.js" charset="utf-8"></script>

</body>
<script type="text/javascript">
  var show_num = [];
  // 粒子线条背景
  layui.use(['form'], function () {
    $(document).ready(function () {
      $('.layui-container').particleground({
        dotColor: '#5cbdaa',
        lineColor: '#5cbdaa',
        particlesNumber: 170, //粒子数量
        particle: {
          minSize: 1, //最小粒子
          maxSize: 3, //最大粒子
          speed: 30, //粒子的动画速度
        }
      });

      //粒子线条
      $(".layui-container").jParticle({
        background: "rgba(0,0,0,0)", //背景颜色
        color: "#fff", //粒子和连线的颜色
        particlesNumber: 100, //粒子数量
        //disableLinks:true,//禁止粒子间连线
        //disableMouse:true,//禁止粒子间连线(鼠标)
        particle: {
          minSize: 1, //最小粒子
          maxSize: 3, //最大粒子
          speed: 30, //粒子的动画速度
        }
      });

    });
  });

  function pageload() {
    $("#title").html(config.CName + "管理后台");
    draw(show_num);


    //监听提交
    Comm.form.on('submit(login)', function (data) {
      var code = $("input[name='captcha']").val();
      var num = show_num.join("");


      /*if (num.toLowerCase() != code.toLowerCase()) {
           draw(show_num);
           Comm.msg("验证码错误", 5);
           return;
       } else {
           draw(show_num);
       }*/
      //这里可以发起ajax请求进行登录验证
      AJAX.POST("/admin/customer/login", data.field, function (d) {
        if (d.code == 1) {
          //   alert(JSON.stringify(d))
          Comm.db("Authorization", d.data.token);
          //d.data.roleId = 1;
          Comm.db("user", d.data);
          Comm.go("index.html")
          Comm.layer.closeAll();
        } else {
          setTimeout(function () {
            Comm.layer.closeAll();
          }, 1000)
          // Comm.layer.closeAll();
          layer.msg(d.msg, {
            icon: 5
          })
        }
      })
    });

    //修正登录框margin
    var fieldset = layui.jquery("fieldset").eq(0);
    fieldset.css("margin-top", (layui.jquery(window).height() - fieldset.height()) * 0.3 + "px");
  }

  function reset1() {
    $("#name").val("");
    $("#password").val("");
    Comm.form.render('input');
  }

  function draw(show_num) {
    console.log(show_num);
    var canvas_width = $('#canvas').width();
    var canvas_height = $('#canvas').height();
    var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
    var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length; //获取到数组的长度

    for (var i = 0; i <= 3; i++) {
      var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
      var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
      var txt = aCode[j]; //得到随机的一个内容
      show_num[i] = txt.toLowerCase();
      var x = 10 + i * 20; //文字在canvas上的x坐标
      var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
      context.font = "bold 18px 微软雅黑";

      context.translate(x, y);
      context.rotate(deg);

      context.fillStyle = randomColor();
      context.fillText(txt, 0, 0);

      context.rotate(-deg);
      context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { //验证码上显示线条
      context.strokeStyle = randomColor();
      context.beginPath();
      context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
      context.stroke();
    }
    for (var i = 0; i <= 30; i++) { //验证码上显示小点
      context.strokeStyle = randomColor();
      context.beginPath();
      var x = Math.random() * canvas_width;
      var y = Math.random() * canvas_height;
      context.moveTo(x, y);
      context.lineTo(x + 1, y + 1);
      context.stroke();
    }
  }

  function randomColor() { //得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

  function displyPwd() {
    var pwd = $("input[name='password']").attr("type");
    var imgs = $("#displyPwd").attr('src');
    if (pwd == 'password') {
      $("input[name='password']").attr("type", "text");
      $("#displyPwd").attr('src', 'img/icon/disply.png');
    } else {
      $("input[name='password']").attr("type", "password");
      $("#displyPwd").attr('src', 'img/icon/undisply.png');
    }
  }
</script>

</html>